<template>
<div class="box" v-cloak>
    <el-row style="height: 40px;line-height: 40px;min-width: 1000px;" :gutter="24" class="header-button">
      <el-col :span="2">
        <el-input v-model="fromData.name" placeholder="學生名稱"></el-input>
      </el-col>
      <el-col :span="2">
        <el-input v-model="fromData.teacherName" placeholder="教師名稱"></el-input>
      </el-col>
      <el-col :span="1" style="text-align: right;min-width: 50px;">
        <span>日期:</span>
      </el-col>
      <el-col :span="3" style="min-width: 230px;">
        <el-button color="#5995ED" @click="timesClick(0)">日</el-button>
        <el-button color="#5995ED" @click="timesClick(1)">星期</el-button>
        <el-button color="#5995ED" @click="timesClick(2)">月</el-button>
      </el-col>
      <el-col :span="3" style="min-width: 250px;">
        <div v-show="fromData.isShowTabel == 0" >
            <el-date-picker v-model="fromData.timestamp" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="change" type="date" placeholder="選擇日期" align="right">
            </el-date-picker>
        </div>
        <div v-show="fromData.isShowTabel == 1">
            <el-date-picker @change="change" v-model="fromData.timestamp" type="week" format="第 ww 周" placeholder="選擇周" >
            </el-date-picker>
        </div>
        <div v-show="fromData.isShowTabel == 2">
            <el-date-picker  v-model="fromData.timestamp" type="month" placeholder="選擇月" value-format="YYYY-MM-DD">
            </el-date-picker>
        </div>
      </el-col>
      <el-col :span="1" style="text-align: right;min-width: 50px;">
        <span>顯示:</span>
      </el-col>
      <el-col :span="1" style="text-align: right;min-width: 110px;">
        <el-input placeholder="學校名稱" :value="schoolName" :disabled="true">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="fromData.state" filterable placeholder="請選擇" @change="getList">
          <el-option label="課室" value="課室"></el-option>
          <el-option label="教師" value="教師"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button color="#5995ED" icon="Search"  @click="getList" circle></el-button>
        <el-button color="#F7B32B"  @click="getNoRollCallRoster">
                 <div class="flex items-center">
           <img src="@/assets/icon/notpresent.png" alt="">
          <div class="ml-[10px]"> 未出席名單</div>
         </div>
        </el-button>
        <el-button color="#2292A4"  @click="openOperateLog">
                 <div class="flex items-center">
           <img src="@/assets/icon/record.png" alt="">
          <div class="ml-[10px]"> 操作記錄</div>
         </div>
         </el-button>
      </el-col>
    </el-row>
    <div class="nav-label">
      <div class="nav-chunk">
        <img src="../../assets/icon/unpaid.png" />
        <span>- 欠款</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/trial.png" />
        <span>- 試堂</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/makeup.png" />
        <span>- 補堂</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/change.png" />
        <span>- 調堂</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/prefund.png" />
        <span>- 已收款</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/abs.png" />
        <span>- 缺席</span>
      </div>
      <div class="nav-chunk">
        <img src="../../assets/icon/complete.png" />
        <span>- 已簽到</span>
      </div>
    </div>
    <table v-show="fromData.isShowTabel !== 2" cellspacing="0" :style="tableStyle" align="content">
      <thead>
        <tr>
          <td rowspan="2"
            style="width: 50px;border-right: 1px solid rgb(179, 179, 179); background-color: ;border-bottom-color: rgb(128,128,128);">
          </td>
          <td v-for="item in newDate" :colspan="item.classroomData.length" :key="item.time"
            style="height: 20px;text-align:center;border:1px solid #B3B3B3;background-color: #1C768D;color:#fff">
            {{item.time}}
            <span style="color:#fff;" v-if="item.time.split(' ')[0] === getDate()">(今日)</span>
          </td>
        </tr>
            <tr  >
              <template v-for="(item,key) in newDate" :key="key" >
                <template v-for="(value,index) in item.classroomData" :key="index">
                  <td 
            :style="`background-color:${value.color || '#1C768D' }`" 
            style="width: 300px;height: 20px;text-align:center;border:1px solid #B3B3B3;color: #FFFFFF;">
            <span >{{value.name}}</span>
                  <!-- <span v-if="fromData.state === '教師'">{{v.name}}</span> -->
                </td>
                </template>
    
              </template>
   
        </tr>
 
      </thead>
      
    <tbody>
        <tr :height="item.height" class='table-tr' v-for="(item,i) in tableData" :key="i" style="position:inherit;">
          <template v-for="(value,v) in item" :key="v">
            <td  v-if="v != 'height'" >
            <span
              v-if="fromData.isShowTabel != 2 && value[0] && !value[0].id && !value[0].admin_id && !value[0].classroom_id">{{value}}</span>
            <div v-for="ci in value" :key="ci.id">
              <!-- :style="`${ci.style}`" -->
              <div :style="`${ci.style}`" style="padding:5px 5px 10px 5px;margin-bottom:1px"  v-if="ci.type === 'course'" class="data_div" @click="edit(ci)">
                <div>
                  <div class="flex" style="color:#fff;">
                    <div class="flex">
                      <span>{{ci.start_time}}-{{ci.end_time}}</span>
                    </div>
                    <span>{{ci.course_name}}</span>

                  </div>
                  <div class="flex" style="color:#fff;">   
                    <span v-if="fromData.state === '課室'">{{ci.teacher_name}}</span>
                    <span v-if="fromData.state === '教師'">{{ci.roomname}}</span>
                    <span>{{ci.class_student_info_count}}</span>
                  </div>
                </div>
                <div class="crad-list">
                  <div class="crad-item flex" @click.stop="onGetStudentInfo(childItem)"
                    v-for="(childItem,index) in ci.classStudent" :key="index">{{index +1 }}
                    {{childItem.name}}
                    <img style="width: auto;height:15px;margin-left:3px" :src="statusOptions[childItem.status]" />
                  </div>
                </div>
              </div>

              <!-- <div @click="onEditTicket(ci)" class="ticket-chunk" :style="`${ci.style}`" v-if="ci.type === 'ticket'">
                <div style="margin-bottom: 2px;color:#000000;">
                  <div style="text-align: left;">套票類型：{{filterTypeName(ci.typeName)}}</div>
                  <div style="text-align: left;">名稱：{{ci.name}}</div>
                </div>
                <div @click.stop="onGetStudentInfo(ci)" class="flex ticket-student hover-student">
                  <span>{{ci.start_time}}-{{ci.end_time}}</span>
                  <span>{{ci.studentName}}</span>
                </div>
              </div> -->
            </div>

          </td>
          </template>
        
        </tr>
      </tbody>
    </table>
    <table v-show="fromData.isShowTabel == 2" cellspacing="0"
      style="width:100%;margin-top: 20px;font-size: 10pt;border:1px solid rgb(179, 179, 179);font-family: '微軟正黑體'">
      <thead>
        <tr height="18">
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期日</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期一</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期二</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期三</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期四</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期五</td>
          <td style="background-color:#1C768C; color:#fff; border:1px solid #B3B3B3;text-align: center">星期六</td>
        </tr>
      </thead>
      <tbody style="vertical-align: top;">
        <tr v-for="(value,key) in tableData" :key="key">
          <td v-for="(val,k) in value" :key="k"
            style="height:100%;border:1px solid #B3B3B3; overflow: hidden; white-space: nowrap;">
            <ul style="width: 100%;display: inline-block;padding: 0;margin: 0;">
              <li
                style="list-style-type:none;cursor:pointer; background-color: #D8DBE2; color:#000;font-size: 16px;font-family: '微軟正黑粗體';font-weight: 600;padding: 3px;top:0">
                {{val.number}}
              </li>
              <li class='floatClick' v-for="v in val.classhourData" @click="edit(v)" :key="v">
                <div style="display: flex; justify-content: space-between;align-items: start;">
                  <span style="margin-left: 1px;margin-top: 1px;">{{v.time}}</span>
                  <span
                    style="display: inline-block;min-width: 100px;word-break: break-all;white-space: normal;">{{v?.course_name}}</span>
                  <span style="width: 40px;text-align:right;">{{v.class_student_info_count}}</span>
                </div>

              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
        <!--新增/修改-->
        <el-dialog ref="dioroom" title="添加/修改" width="1200px" v-model="addEditFromVisible">
      <el-form ref="form" label-width="80px" v-loading="loading">
        <el-row  :gutter="24">
          <el-col :span="8">
            <el-form-item label="教室">
          <el-button >{{editData.roomname}}</el-button>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="教練">
          <el-button>{{editData.teacher_name||'暫無選擇教練'}}</el-button>
        </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>

        <el-col :span="8">
          <el-form-item label="課程">
          <div>{{editData.course_name}}</div>
          <span v-if="editData.courses_id !== ''"></span>
        </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="日期">
          <!-- <el-date-picker v-show="editData.status==='調堂'" v-model="editData.date" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间">
          </el-date-picker> -->
          <span >{{editData.start_time}} - {{editData.end_time}}
          </span>
        </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="22">
          <el-form-item label="備注">
          <el-input v-model="editData.remark"></el-input>
        </el-form-item>
        </el-col>
<!-- 
        <el-form-item v-show="editData.status==='調堂'" label="開始時間">
          <el-time-select v-model="editData.start_time" :clearable="false" placeholder="任意時間點" :picker-options="{
            start: '07:00',
            step: '00:15',
            end: '23:00',
            maxTime: editData.end_time
          }">
          </el-time-select>
        </el-form-item>
        <el-form-item v-show="editData.status==='調堂'" label="結束時間">
          <el-time-select v-model="editData.end_time" :clearable="false" placeholder="任意時間點" :picker-options="{
            start: '07:00',
            step: '00:15',
            end: '23:00',
            minTime: editData.start_time
          }">
          </el-time-select>
        </el-form-item> -->

        <el-form-item label="學生列表">
          <el-table :data="editData.classStudent"  style="width: 100%" v-loading="studentLoading" empty-text="暫無數據">
            <el-table-column prop="name" label="名字" width="100" align="center"></el-table-column>
            <el-table-column prop="sex" label="性別" width="60" align="center">
              <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row?.sex ==1 ? '男' :'女' }}</span>
                  </div>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="聯絡電話" width="150" align="center"></el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="150" align="center"></el-table-column>
            <el-table-column prop="education" label="學歷" width="60" align="center"></el-table-column>
            <el-table-column prop="state" label="課程狀態" align="center">
            </el-table-column>
            <el-table-column width="400" label="操作" align="center">
              <template #default="scope">
                <div class="flex">
                                <el-link :underline="false" type="primary" @click="onGetStudentInfo(scope.row)" >學生詳情</el-link>
                <!-- <el-link :underline="false" type="primary" class="ml-[15px]" @click="editStudentInfo(scope.row,scope.$index)" >更改</el-link> -->
               <DioUser ref="dioUser"  @update="handleDioSub" :row="scope.row" :index="scope.$index"></DioUser>
                </div>
              </template>
            </el-table-column>
          </el-table>

        </el-form-item>
      </el-row>
      </el-form>
      <template #footer>
        <div  class="dialog-footer">
        <el-button @click="addEditFromVisible = false">取 消</el-button>
        <el-button  color="#081F42" @click="determineEdit">確 定</el-button>
      </div>
      </template>
    </el-dialog>
    <!-- <DioUser ref="dioUser" @update="handleDioSub"></DioUser> -->
    <NoRollCall ref="NoRollCallRef"></NoRollCall>
    <TimeLog ref="TimeLogRef"></TimeLog>
</div>
</template>

<script setup>
import { reactive, ref,onMounted } from 'vue' 
import unpaid from '../../assets/icon/unpaid.png'
import trial from '../../assets/icon/trial.png'
import makeup from '../../assets/icon/makeup.png'
import changes from '../../assets/icon/change.png'
import prefund from '../../assets/icon/prefund.png'
import complete from '../../assets/icon/complete.png'
import abs from '../../assets/icon/abs.png'

import NoRollCall from './components/NoRollCall.vue'
import TimeLog from './components/timeLog.vue'

import {classTime,classroomEdit} from '@/http/index.js'
import DioUser from './components/DioUser.vue'
import {message} from '@/common/function.js'
import {dayjs} from 'element-plus'
const statusOptions =reactive({
          '1': unpaid,
          '3': trial,
          '4': makeup,
          '5': changes,
          '2':prefund,
          '7':complete ,
          '6': abs,
        }) 
const schoolName  = ref(localStorage.getItem('school_name'))

const fromData = reactive({
          name: '',
          teacherName: '',
          // status: '',
          state:'課室',
          timestamp:'',
          schoolId: localStorage.getItem('school_id'),
          isShowTabel: 1
        })
const timesClick = (num)=> {
  fromData.timestamp = ''
    fromData.isShowTabel = num
    init()
}

const tableData = ref([])
const tableStyle = ref('')
const classroomData = ref('')
const newDate = ref('')

const init = async()=>{
  const data = await classTime(fromData)
  if (data.code == 200 ) {
    if (fromData.isShowTabel == 2) {
    tableData.value  = data.data
    }else{
      tableStyle.value = data.data.tableStyle
      tableData.value  = data.data.timeTableData
      newDate.value = data.data.timeData
    }
  }
}
const change = (e)=>{
  console.log(e);
  if (e == null || !e) {
    fromData.timestamp = ''
  }else if (fromData.isShowTabel == 1 && fromData.timestamp !=='' ) {
  fromData.timestamp = dayjs(e).add(2, 'day').format('YYYY-MM-DD')
  }
  console.log(fromData.timestamp);
}
const getList = ()=>{
  init()
}
const getDate = ()=> {
        var now = new Date()
        var year = now.getFullYear()
        var month = now.getMonth() + 1
        var day = now.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '年' + month + '月' + day + '日'
      }
const onEditTicket = (e)=>{
console.log(e);
      }

const addEditFromVisible = ref(false)
const loading = ref(false)
const studentLoading = ref(false)
const editData = ref({})
const dioroom = ref('')
const edit = async(e)=>{
  e.classStudent = e.classStudent
  editData.value = e
  addEditFromVisible.value = true
  // console.log(form.value);
  // await dioroom.value.init();
console.log(e);
}
import { useRouter, useRoute } from "vue-router";
      //獲取時間表學生列表信息
const router = useRouter();
const onGetStudentInfo = (data) =>{
  let {
          href
        } = router.resolve({
          path: '/student',
          query: {
            id: data.student_id
          }
        })
         localStorage.setItem('showStudentId', data.student_id)
        window.open(href, '_blank')
      }

const dioUser = ref('')
      // 學生信息更改
// const editStudentInfo = (data, index) =>{
// console.log(data, index);
//       dioUser.value.init(data, index);
//       }
       // 學生信息修改監聽
const handleDioSub=(data)=> {
        let {
          params,
          index
        } = data;
        Object.assign(editData.value.classStudent[index], params);
      }
const determineEdit = async()=>{
  await dioUser.value.submit(async(e)=>{
    console.log(e);
    if (e) {
        let {
          params,
          index
        } = e;
        Object.assign(editData.value.classStudent[index], params);

          let obj = {
          id:'',
          remark:'',
          student:[],
          school_id:localStorage.getItem('school_id')
        }
        obj.student = editData.value.classStudent.map(v=>{
          let defaultObj = {
            id: v.classtime_id,
            state: v.state,
            student_id: v.student_id,
            classStudentid: v.classtime_id,//v.id
          }
          switch (v.state) {
            case '遲到':
              defaultObj.lastMin = v.lastMin;
              break;
            case '調堂':
              defaultObj.course_id = editData.value.course_id,
              defaultObj.admin_id = v.admin_id;
              defaultObj.classroom_id = v.classroom_id;
              defaultObj.end_time = v.end_time;
              defaultObj.start_time = v.start_time;
              // defaultObj.maxNumber = v.maxNumber;
              break;
          }
        return defaultObj
        })
        obj.remark = editData.value.remark
        obj.id = editData.value.id
        console.log(obj,'2222222222');
        const data = await classroomEdit(obj)
        if (data.code == 200) {
          message('修改成功')
          addEditFromVisible.value = false
          init()
        }else{
          message(data.response.data.message,'warning')
        }
    }
  });

}

// 未出席名單
const NoRollCallRef = ref('')
const getNoRollCallRoster = ()=>{
NoRollCallRef.value.init()
}
// 操作記錄
const TimeLogRef = ref('')
const openOperateLog = ()=>{
TimeLogRef.value.init()
}
onMounted(() => {
  fromData.state = '課室'
  init()
})
</script>

<style lang='less'  scoped>
.box {
  padding: 16px 33px;
  height: 100vh;
}
.header-button{
  .el-button{
    color: #fff;
  }
}
.table-tr td {
    text-align: center;
    position: relative;
    border: 1px solid #e9e9e9;
    /*width:3000px;*/
  }

  .table-tr td:nth-child(1) {
    width: 50px;
    // background-color: rgb(230, 230, 230);
    border-bottom-color: rgb(128, 128, 128);
    border-right-color: rgb(128, 128, 128);
  }

  .data_div {
    font-size: 10px !important;
  }

  .data_div:hover {
    /*border-color: rgb(0,204,204);*/
    cursor: pointer !important;
    outline: rgb(59, 152, 253) solid 2px !important;
  }

  .floatClick {
    list-style-type: none;
    padding: 0 5px;
    color: #000000;
    border-bottom: 1px dotted #CCCCCC !important;
  }

  .floatClick:hover {
    cursor: pointer !important;
    outline: rgb(59, 152, 253) solid 2px !important;
  }

  .nav-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 5px 0;
  }

  .nav-chunk {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 10px;
  }

  .nav-chunk img {
    width: auto;
    height: auto;
  }

  .nav-chunk span {
    font-size: 14px;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .crad-list {
    // padding-top: 10px;
    text-align: left;
  }

  .crad-list .crad-item {
    padding: 0 5px;
    margin: 1px 5px;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    background-color: #FFFFFF;
  }

  .ticket-student {
    background-color: #000;
    margin-bottom: 2px;
    cursor: pointer;
  }

  .hover-student:hover {
    background-color: #FFFFFF;
    color: #000000;
  }

  .ticket-chunk {
    cursor: pointer;
    border: 1px solid #fff;
  }

  .ticket-chunk:hover {
    border-color: #000;
  }

</style>
